<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给画布增加一个阴影和圆角的样式 */
        canvas {
            box-shadow: 0px 0px 5px #ccc;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="500">
        当前浏览器不支持canvas元素，请升级或更换浏览器！
    </canvas>

    <!-- 多线程试验 -->
    <script>
        // 主线程中
        var code = `
  self.onmessage = function(event) {
    console.log('接收到主线程的消息：', event.data);
    
    // 在Worker线程中执行耗时操作
    var result = doSomeHeavyTask();
    
    // 向主线程发送消息
    self.postMessage(result);
  };
  
  function doSomeHeavyTask() {
    // 执行耗时操作
    return '任务执行完毕';
  }
`;

        var blob = new Blob([code], { type: 'application/javascript' });
        var worker = new Worker(URL.createObjectURL(blob));

        worker.onmessage = function (event) {
            console.log('Worker线程返回的消息：', event.data);
        };

        worker.postMessage('开始执行'); // 向Worker线程发送消息

    </script>

    <!-- 定时器试验 -->
    <!-- <script>
        // var myIntervalTimer = null
        // const myInterval = (fn, delay) => {
        //     myIntervalTimer = setTimeout(() => {
        //         fn().then(() => {
        //             console.log('自定义延时器执行')
        //             myInterval(fn, delay)
        //         })
        //     }, delay)
        // }
        class myInterval {
            constructor(fn, time) {
                this.end = false
                // 定义一个递归函数，持续调用定时器
                var execute = async (fn, time) => {
                    await fn();
                    if (!this.end) {
                        // 在函数执行完毕后才再起用定时器
                        setTimeout(function () {
                            console.log('自定义延时器执行')
                            execute(fn, time);
                        }, time);
                    }
                };
                execute(fn, time);
            }
            clear() {
                this.end = true
            }
        }

        let myIntervalTimer = new myInterval(async () => {
            console.log('模拟请求');
            await new Promise((resolve) => setTimeout(resolve, 5000))
        }, 2000)

        setTimeout(() => {
            myIntervalTimer.clear()
        }, 10000);
    </script> -->

    <!-- <script>
        class Singleton {
           static instance;

            constructor() {
                if (Singleton.instance) {
                    return Singleton.instance;
                }
                Singleton.instance = this;
                // 其他初始化代码
            }

            test(){
                console.log('father');
            }
        }

        class ChildClass1 extends Singleton {
            constructor() {
                super();
                this.test1 = 1;
                // 子类1的构造函数
            }
            test(){
                console.log('child1');
            }
        }

        class ChildClass2 extends Singleton {
            constructor() {
                super();
                this.test1 = 2;
                // 子类2的构造函数
            }
        }

        // 创建子类1的实例
        const instance1 = new ChildClass1();

        // 创建子类2的实例
        const instance2 = new ChildClass2();

        console.log(instance1.test1); 
        console.log(instance2.test1); 
        instance1.test()
    </script> -->

    <!-- <script>
        // 获取 canvas 元素
        var canvas = document.getElementById('canvas');
        // 通过判断getContext方法是否存在来判断浏览器的支持性
        if(canvas.getContext) {
          // 获取绘图上下文
          var ctx = canvas.getContext('2d');
          var ball = {
            x: 100,
            y: 100,
            vx: 1,
            vy: 1,
            radius: 25,
            color: 'blue',
            draw: function() {
              ctx.beginPath();
              ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
              ctx.fillStyle = this.color;
              ctx.fill();
            }
          };
          function draw() {
            // ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 用带透明度的矩形代替清空
            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ball.draw();
            // 添加加速度
            // 添加速率
            ball.x += ball.vx;
            ball.y += ball.vy;
           window.requestAnimationFrame(draw);
          }
          window.requestAnimationFrame(draw);
          ball.draw();
        }
      </script> -->


    <!-- <script>
        count = {
            '-1': 0,
            0: 0,
            1: 0,
            2: 0,
            3: 0,
            4: 0,
            5: 0,
            6: 0,
            7: 0,
        }
        for (let index = 0; index < 10000; index++) {
            let index = Math.floor(Math.random() * 3 - 1);
            count[index] ++
            
            // let totalScore = 6;// 计算总分数

            // const randomScore = Math.random() * totalScore;// 0-totalScore
            // // const randomScore = Math.floor(Math.random() * (totalScore + 1))  ;// 0-totalScore
            // // count[randomScore] ++
            // enemies = [1, 2, 3]
            // let cumulativeScore = 0;// 用一个累积的数模拟区间
            // for (let i = 0; i < enemies.length; i++) {
            //     cumulativeScore += enemies[i];
            //     console.log('?', randomScore, cumulativeScore);
            //     if (randomScore < cumulativeScore) {
            //         console.log('?》', randomScore, cumulativeScore);
            //         count[enemies[i]] ++
            //         break
            //     }
            // }

        }

        console.log(count);

    </script> -->

    <!-- <script>
        // let a=1
        // let b=[3,4]
        // b.push(a)
        // console.log(...a);
        class Parent {
            static a = 1
            constructor(game) {
                // this.game = game;
                // this.spriteWidth = 60;
                // this.spriteHeight = 87;
                // this.image = document.getElementById('enemy_plant');
                // this.maxFrame = 1;

                setTimeout(() => {
                    this.computed();
                    
                })
                this.init();
            }

            init() {
            }

        }

        class Child extends Parent {
            static a = 2
            constructor(game) {
                super(game);
                this.haha = 'haha'
            }

            computed() {
                console.log(Child.a);
                console.log('Child computed', this.haha);
            }
        }

        const game = 'example';
        const child = new Child(game);
    </script> -->
</body>

</html>